<template>
  <view style="width: 100%; height: 100%;">
    <view class="tabs">
      <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="current==index&&'active'" @click="change(index)">
      {{tab.title}}
      </view>
    </view>
    <!-- <swiper :current="current" class="swiper-box" @change="onChange" disable-touch> -->
        <!-- <swiper-item v-for="(item ,index) in tabs" :key="index"> -->
          <view class="swiper-box" v-for="(item ,index) in tabs" :key="index">
            <!-- #ifdef MP -->
            <slot name="{{'content' + index}}"></slot>    
            <!-- #endif -->
            <!-- #ifndef MP -->
            <slot :name="'content'+index"></slot>
            <!-- #endif -->
          </view>
        <!-- </swiper-item> -->
    <!-- </swiper> -->
  </view>
</template>

<script>
	export default {
    name: 'swiperTab',
    props: {
      currentTab: {
        type: Number,
        default: 0
      },
      tabs: {
        type: Array,
        default: Array
      }
    },
		data() {
			return {
				current: this.currentTab
			};
		},
    methods: {
      change(e) {
        this.current = e;
        this.$emit('change', e);
      },
      scrolltolower(e) {
        this.$emit('onReachBottom', this.current);
        console.log(this.current)
      }
    }
	}
</script>
<style>
swiper-tab{
  display: block;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.tabs{
  width:  750rpx;
  height: 108rpx;
  display: flex;
  background: #fff;
  .tab-item {
    flex: 1;
    text-align: center;
    color: grey;
    font-size: 32rpx;
    font-weight: 500;
    height: 100%;
    box-sizing: border-box;
	line-height: 108rpx;
    &.active{
      color: $uni-color-primary;
      border-bottom: 2rpx solid $uni-color-primary;
    }
  }
}
.swiper-box{
  width: 100%;
  height: calc(100% - 75rpx);
  overflow: hidden;
}
</style>
